import React, { useState } from 'react';
import { Card } from 'antd';
import { FormattedMessage } from 'umi';
import { VisitDataType } from '../data.d';
import { Bar } from './Charts';
import FirstOrgListComponent from '../../../System/components/FirstOrgListComponent';
import OrgTypeListComponent from '../../../System/components/OrgTypeListComponent';
import styles from '../style.less';

/**
 * 设备分布统计
 * @param param0 
 */

interface param {
  orgTypeId:number;
  topOrgId:number;
}

interface OrgTypeProps {
  loading:boolean;
  salesPieData: VisitDataType[];
  handleOrgIdChange?: (value: param) => void;
}

const DeviceStatistics : React.FC<OrgTypeProps> = (props) => {
  const [disabled, handleDisabled] = useState<boolean>(true);//机构类型是否可用，根据上级机构
  const [parentOrgId, setParentOrgId] = useState<number>(10000);//【机构类型】与【上级机构】联动
  const [value, setValue] = useState<string>();
  const [searchParam,setParam] = useState<param>(); //搜索条件 orgTypeId topOrgId
  const { loading,salesPieData,handleOrgIdChange } = props;

  return(
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    extra={
      <>
      <span style={{display:'inline-block', marginRight:10,marginBottom:10}}>
        <FirstOrgListComponent
          disabled={false} 
          defaultvalue={null} 
          selectChange={(value) => {
            const obj = new Object();
            obj["topOrgId"] = value;
            setParam(JSON.parse(JSON.stringify(obj)));
            setValue(null);
            if(value){
              handleDisabled(false);
            }else{
              handleDisabled(true);
            }
            setParentOrgId(value);
            handleOrgIdChange(obj);
          }}>
        </FirstOrgListComponent>
      </span>
      <OrgTypeListComponent 
        defaultvalue={-1}
        value={value}
        disabled={disabled}
        selector={parentOrgId}
        selectChange={(value) => {
          const obj = new Object();
          obj["topOrgId"] = searchParam?.topOrgId;
          obj["orgTypeId"] = value;
          setValue(value);
          handleOrgIdChange(JSON.parse(JSON.stringify(obj)));
        }}
      >
      </OrgTypeListComponent>
      </>
    }
    
    title={
      <FormattedMessage
        id="dashboardanddashboardanalysis.analysis.devices-statistics"
        defaultMessage="The Statistics of Devices"
      />
    }
    style={{
      height: '100%',
    }}
  >
    <div>
      <Bar
        height={295}
        title={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.devices-number"
            defaultMessage="Devices number"
          />
        }
        data={salesPieData}
      />
    </div>
  </Card>
)};

export default DeviceStatistics;
